<template>
  <div>
    <!-- Form -->
    <!-- el-dialog 是弹窗样式，title 绑定弹窗的标题内容，visible 绑定弹窗是否展示 -->
    <el-card class="box-card" title="新增">
      <div slot="header" class="clearfix">
        <span>{{form.id ? '编辑' : '新建'}}</span>
      </div>
      <!-- model 绑定表单对象，rules 绑定表单规则，ref 用来校验规则 -->
      <el-form :model="form" :rules="formRules" ref="form">
        <!-- el-form-item 绑定表单样式，label 表单的名称，formLabelWidth 设置 label 的宽度, 设置 prop 来进行规则校验 -->
        <el-form-item label="课程编号" :label-width="formLabelWidth" prop="courseNum">
          <el-input v-model="form.courseNum"></el-input>
        </el-form-item>
        <el-form-item label="课程名" :label-width="formLabelWidth" prop="courseName">
          <el-input v-model="form.courseName"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">确定</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>


// 下面是 Vue 组件
export default {
  inject:['reload'],
  data() {
    return {
      formLabelWidth: "120px", // 表单 label 的宽度
      form: {}, // 用作表单绑定的内容
      formRules: {
        courseName: [
          { required: true, message: "请输入名字", trigger: "blur" }
        ],
        courseNum: [
          { required: true, message: "请输入编号", trigger: "blur" },
          { min: 6, max: 6, message: '请输入正确的六位编号', trigger: 'blur' }
        ]
      },
    };
  },
  watch: {
    $route() {
      // 对路由变化作出响应...
      this.updateFormItem();
    },
  },
  created: function () {
    this.updateFormItem();
  },
  methods: {
    // 获取路由信息，填充
    updateFormItem() {
     const id = this.$route.params.courseId;
     // const tableData = this.$route.params.tableData;
      console.log("id为："+id);
      
        this.form={};
    },

    // 新增一个数据
    updateTableItem() {
      // 检查是否有 id，有则更新，没有则新增
      this.axios({
            method: "post",
            url: "http://localhost:8080/course",
            data: this.form,
          })
          .then(() => {
            console.log("新增数据成功");
            this.reload()
          });
      },
    // 提交新增/修改表单
    submitForm() {
      // 校验表单
      // Element 表单校验规则配置，请查看https://element.eleme.cn/#/zh-CN/component/form
      this.$refs["form"].validate((valid) => {
        if (valid) {
          // 校验通过
          // 更新数据信息
          this.updateTableItem(this.form);
          // 跳转回列表页
          this.$router.push({ name: "Clist" });
        } else {
          // 校验失败
          return false;
        }
      });
    },
  },
};
</script>

<style>
</style>